<template>
  <div class="order">
    <div class="header3 colorWhite">
      <div @click="goBack"
           style="float: left">
        <a-icon type="left"
                class="iconimg colorWhite" />
        <a class="h3 colorWhite">营养餐厅</a>
      </div>
      <div class="chargeback">
        <div class="icon"></div>
        <a @click='tofour'
           class="span">个人订单</a>
      </div>
    </div>
    <div style="clear: both; display: flex;">
      <mainleft :mainList="mainList"
                @listenChild="showMsgFromChild"></mainleft>
      <mainright :foodList="foodList"></mainright>
    </div>
    <footww></footww>
    <div class="layder"
         v-if="showflag">
      <div class="lay-cont">
        <div class="stateimg">
          <img src="../../../../static/images/indexone/state03.png" />
        </div>
        <p>暂无订单!</p>
      </div>
    </div>
  </div>
</template>

<script>
import mainleft from './mainLeft'
import mainright from './mainRight'
import footww from './footww'
import urls from '../../../common.js'
export default {
  name: 'header3',
  data () {
    return {
      mainList: [],
      foodList: [],
      showflag: false,
      bed_no: this.$store.state.bedNo,
      fourdata: [],
      id: 1
    }
  },
  components: {
    mainleft,
    mainright,
    footww
  },
  created () {
    // this.dateTimes()
    // this.getGroupsList()
    // this.getGoodsList()
    // this.clearSettime = setInterval(() => {
    // this.toOrderFive()
    // }, 30000)
  },
  methods: {
    // dateTimes () { // 调用main.js的时间
    //   let date = this.toLocaleString()
    //   date.then(function (datas) {
    //     let data = new Date(datas.body)
    //     this.dateObj.hours = this.addZero(data.getHours())
    //     this.dateObj.minutes = this.addZero(data.getMinutes())
    //     this.currentTime = this.dateObj.hours + ':' + this.dateObj.minutes
    //   })
    // },
    toOrderFive () { // 获取当前时间 规定超出时间不能点餐
      // this.dateTimes()
      // console.log(this.currentTime)
      let date = this.toLocaleString()
      date.then(function (datas) {
        let data = new Date(datas.body)
        let hour = this.addZero(data.getHours())
        let minutes = this.addZero(data.getMinutes())
        let currentTime = hour + ':' + minutes
        // console.log(currentTime)
        if (currentTime >= '07:30' && currentTime <= '08:40') {
          // this.$router.push(params)
        } else if (currentTime >= '11:00' && currentTime <= '13:30') {
          // this.$router.push(params)
        } else if (currentTime >= '17:30' && currentTime <= '19:00') {
          // this.$router.push(params)
        } else {
          this.$router.push('/orderOne')
          // clearInterval(this.clearSettime) // 离开当前页面清除时间定时器
        }
      })
    },
    goBack () {
      this.$router.go(-1) // 返回上一页
      // clearInterval(this.clearSettime) // 离开当前页面清除时间定时器
      this.$store.commit('updataToCar') // 返回上一页更新清空数组
      clearInterval(window.clearSettime)
    },
    showMsgFromChild (data) { // 获取菜单栏id给菜品的接口添加参数
      this.getGoodsList(data)
      // this.id = data
    },
    getGroupsList () { // 左边菜单栏的接口
      var that = this
      this.$http.get(urls.getGoodsGroupList + '/1').then(result => { // 获取菜单列表
        if (result.body.code === '200') {
          that.mainList = result.body.data
          if (result.body.data.length > 0) {
            let id = result.body.data[0].id
            that.getGoodsList(id)
            console.log(result.body.data)
          }
        }
      })
    },
    getGoodsList (param) { // 右边菜品的接口
      console.log(this.id)
      var that = this
      this.$http.post(urls.getGoodsList, {
        type: 1,
        time_frame: param
      }).then(result => { // 获取菜品列表
        if (result.body.code === '200') {
          console.log(result.body.data.list)
          for (var i = 0; i < result.body.data.list.length; i++) { // 获取data的长度，并循环
            result.body.data.list[i].count = 0 // 给每一个data添加一个count属性
            if (this.$store.state.car.length > 0) { // 如果car的长度大于0
              for ( // 循环car
                let index = 0;
                index < this.$store.state.car.length;
                index++
              ) {
                const element = this.$store.state.car[index]
                if (
                  element.goods_name === result.body.data.list[i].goods_name && // 如果goods_name和id相同，就让每个元素的num等于对应的count
                  element.type_id === result.body.data.list[i].time_frame
                ) {
                  result.body.data.list[i].count = element.num
                }
              }
            } else {
              result.body.data.list[i].count = 0
            }
          }
          that.foodList = result.body.data.list
        }
      })
    },
    getPersonOrderList () { // 个人订单接口，点击一次调一次接口
      console.log(this.bed_no)
      var that = this
      that.$http.get(urls.getPersonOrderList + '/' + that.bed_no).then(result => { // 获取个人订单
        if (result.body.code === '200') {
          that.fourdata = result.body.data
          if (this.fourdata.length > 0) {
            this.$router.push({ path: '/orderFour' })
          } else {
            this.showflag = true
            setTimeout(() => {
              this.showflag = false
            }, 3000)
          }
        }
      })
    },
    tofour () { // 判断个人订单有没有值
      this.getPersonOrderList()
      // console.log(this.fourdata)
      // if (this.fourdata.length > 0) {
      //   this.$router.push({ path: '/orderFour' })
      // } else {
      //   this.showflag = true
      //   setTimeout(() => {
      //     this.showflag = false
      //   }, 3000)
      // }
    }
  },
  watch: { // 监听离开页面清空定时器
    $route (to, from) {
      // console.log(to)
      if (to.path === '/orderOne') {
        // clearInterval(this.clearSettime)
      }
    },
    id: function () { // 监听id的变化
      this.getGoodsList()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../static/css/color.styl'
.order
  position relative
  background-color $color-bgc
  height 100%
.colorWhite
  color $color-white
.header3
  height 0.98rem
  background-color $color-main
  text-align justify
  line-height 0.98rem
  padding-left 0.3rem
  margin-bottom 0.3rem
  .iconimg
    font-size 0.36rem
    vertical-align -0.06rem
  .h3
    display inline-block
    font-size 0.36rem
  .chargeback
    height 100%
    float right
    line-height 1rem
    font-size 0.32rem
    margin-right 0.4rem
    .icon
      width 0.32rem
      height 0.32rem
      border-radius 50%
      background url('../../../../static/images/Order4/MuslimRes_Icon.png') no-repeat
      background-size 100%
      margin 0.37rem 0.15rem 0 0
      float left
    .span
      color $color-white
      font-weight normal
    .time
      margin-left 0.6rem
      color $color-orderone
.anticon
  font-size 0.26rem
  vertical-align -0.23em
.layder
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  .lay-cont
    width 4rem
    height 2.3rem
    background-color rgba(0, 0, 0, 0.4)
    margin 4.8rem auto
    border-radius 0.3rem
    color #fff
    text-align center
    padding-top 0.4rem
    .stateimg
      width 0.78rem
      height 0.78rem
      margin 0 auto 0.4rem auto
      img
        width 100%
        height 100%
        display block
</style>
